<template>
  <div>
    <el-page-header @back="goBack()" style="color: #00a0e9; font-size: medium"></el-page-header>
    <div style="font-size:30px; text-align:center">
      <b>棉花详情</b>
    </div>
    <el-divider content-position="left">
      <b style="font-size: 20px">棉花生长信息</b>
    </el-divider>
    <el-form :model="dataForm"  class="wds-form-top" label-width="150px">
      <el-row class="wds-frame">
        <el-row class="wds-el-row" type="flex">
          <el-col :span="6">
            <div class="wds-frame-l">
              <div class="wds-bj"></div>
              <el-form-item class="wds-frame-form-item" label="记录人" prop="addUser">
                {{dataForm.addUser}}
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="wds-frame-l">
              <div class="wds-bj"></div>
              <el-form-item class="wds-frame-form-item" label="棉花编号" prop="mhBh">
                {{dataForm.mhBh}}
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="wds-frame-l">
              <div class="wds-bj"></div>
              <el-form-item class="wds-frame-form-item" label="棉花总数量" >
                {{dataForm.mhNumber}}株
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="wds-frame-l">
              <div class="wds-bj"></div>
              <el-form-item class="wds-frame-form-item" label="株高" prop="mhHeight">
                {{dataForm.mhHeight}}cm
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row class="wds-el-row" type="flex">
          <el-col :span="6">
            <div class="wds-frame-l">
              <div class="wds-bj"></div>
              <el-form-item class="wds-frame-form-item" label="茎粗" prop="mhJc">
                {{dataForm.mhJc}}mm
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="wds-frame-l">
              <div class="wds-bj"></div>
              <el-form-item class="wds-frame-form-item" label="叶片数" prop="mhYps">
                {{dataForm.mhYps}}片
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="wds-frame-l">
              <div class="wds-bj"></div>
              <el-form-item class="wds-frame-form-item" label="第一果枝节高度" prop="mhYps">
                {{dataForm.mhDygzjgd}}cm
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="wds-frame-l">
              <div class="wds-bj"></div>
              <el-form-item class="wds-frame-form-item" label="果枝数" prop="mhGzs">
                {{dataForm.mhGzs}}个
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row class="wds-el-row" type="flex">
          <el-col :span="6">
            <div class="wds-frame-l">
              <div class="wds-bj"></div>
              <el-form-item class="wds-frame-form-item" label="蕾数" prop="mhLs">
                {{dataForm.mhLs}}个
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="wds-frame-l">
              <div class="wds-bj"></div>
              <el-form-item class="wds-frame-form-item" label="花数" prop="mhHs">
                {{dataForm.mhHs}}个
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="wds-frame-l">
              <div class="wds-bj"></div>
              <el-form-item class="wds-frame-form-item" label="总铃数" prop="mhZls">
                {{dataForm.mhZls}}个
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="wds-frame-l">
              <div class="wds-bj"></div>
              <el-form-item class="wds-frame-form-item" label="单株结铃数" prop="mhDzjls">
                {{dataForm.mhDzjls}}个
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row class="wds-el-row" type="flex" >
          <el-col :span="6">
          <div class="wds-frame-l">
            <div class="wds-bj"></div>
            <el-form-item class="wds-frame-form-item" label="吐絮数" prop="mhTxs">
              {{dataForm.mhTxs}}个
            </el-form-item>
          </div>
        </el-col>
          <el-col :span="6">
            <div class="wds-frame-l">
              <div class="wds-bj"></div>
              <el-form-item class="wds-frame-form-item" label="果枝始节" prop="mhGzsj">
                {{dataForm.mhGzsj}}节
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="wds-frame-l">
              <div class="wds-bj"></div>
              <el-form-item class="wds-frame-form-item" label="果枝台数" prop="mhGzts">
                {{dataForm.mhGzts}}个
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="wds-frame-l">
              <div class="wds-bj"></div>
              <el-form-item class="wds-frame-form-item" label="铃长" prop="mhLc">
                {{dataForm.mhLc}}cm
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row class="wds-el-row" type="flex" >
          <el-col :span="6">
          <div class="wds-frame-l">
            <div class="wds-bj"></div>
            <el-form-item class="wds-frame-form-item" label="铃宽" prop="mhLk">
              {{dataForm.mhLk}}cm
            </el-form-item>
          </div>
        </el-col>
          <el-col :span="6">
            <div class="wds-frame-l">
              <div class="wds-bj"></div>
              <el-form-item class="wds-frame-form-item" label="铃型" prop="mhLx">
                {{dataForm.mhLx}}
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="wds-frame-l">
              <div class="wds-bj"></div>
              <el-form-item class="wds-frame-form-item" label="单铃重" prop="mhDlz">
                {{dataForm.mhDlz}}克
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="wds-frame-l">
              <div class="wds-bj"></div>
              <el-form-item class="wds-frame-form-item" label="记录时间" prop="recordDate">
                {{dataForm.recordDate}}
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row class="wds-el-row" type="flex">
          <el-col :span="24">
            <div class="wds-frame-l">
              <div class="wds-bj"></div>
            </div>
          </el-col>
        </el-row>
      </el-row>
    </el-form>

    <el-divider content-position="left">
      <b STYLE="font-size: 20px">棉花质量信息</b>
    </el-divider>
    <el-form :model="dataForm" ref="dataForm2" class="wds-form-top" label-width="150px">
      <el-row class="wds-frame">
        <el-row class="wds-el-row" type="flex">
          <el-col :span="6">
            <div class="wds-frame-l">
              <div class="wds-bj"></div>
              <el-form-item class="wds-frame-form-item" label="衣分">
                {{dataForm.mhYf}}%
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="wds-frame-l">
              <div class="wds-bj"></div>
              <el-form-item class="wds-frame-form-item" label="籽棉产量" prop="mhZmcl">
                {{dataForm.mhZmcl}}kg
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="wds-frame-l">
              <div class="wds-bj"></div>
              <el-form-item class="wds-frame-form-item" label="马克隆值" prop="mhMklz">
                {{dataForm.mhMklz}}
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="wds-frame-l">
              <div class="wds-bj"></div>
              <el-form-item class="wds-frame-form-item" label="整齐度" prop="mhZqd">
                {{dataForm.mhZqd}}%
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row class="wds-el-row" type="flex">
          <el-col :span="6">
            <div class="wds-frame-l">
              <div class="wds-bj"></div>
              <el-form-item class="wds-frame-form-item" label="比强度" prop="mhBqd">
                {{dataForm.mhBqd}}CN/tex
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="wds-frame-l">
              <div class="wds-bj"></div>
              <el-form-item class="wds-frame-form-item" label="伸长率" prop="mhSzl">
                {{dataForm.mhSzl}}%
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="wds-frame-l">
              <div class="wds-bj"></div>
              <el-form-item class="wds-frame-form-item" label="反射率" prop="mhFsl">
                {{dataForm.mhFsl}}%
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="wds-frame-l">
              <div class="wds-bj"></div>
              <el-form-item class="wds-frame-form-item" label="黄度" prop="mhHd">
                {{dataForm.mhHd}}
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row class="wds-el-row" type="flex">
          <el-col :span="6">
            <div class="wds-frame-l">
              <div class="wds-bj"></div>
              <el-form-item class="wds-frame-form-item" label="衣指" prop="mhYz">
                {{dataForm.mhYz}}g
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="wds-frame-l">
              <div class="wds-bj"></div>
              <el-form-item class="wds-frame-form-item" label="籽指" prop="mhZz">
                {{dataForm.mhZz}}g
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row class="wds-el-row" type="flex">
          <el-col :span="24">
            <div class="wds-frame-l">
              <div class="wds-bj"></div>
            </div>
          </el-col>
        </el-row>
      </el-row>
    </el-form>

    <el-divider content-position="left">
      <b style="font-size: 20px">棉花病虫信息</b>
    </el-divider>
    <el-form :model="dataForm2" ref="dataForm2" class="wds-form-top" label-width="150px">
      <el-row class="wds-frame">
        <el-row class="wds-el-row" type="flex">
          <el-col :span="6">
            <div class="wds-frame-l">
              <div class="wds-bj"></div>
              <el-form-item class="wds-frame-form-item" label="螨害株数">
                {{dataForm2.bcMhzs}}株
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="wds-frame-l">
              <div class="wds-bj"></div>
              <el-form-item class="wds-frame-form-item" label="百株螨量" prop="bcBzml">
                {{dataForm2.bcBzml}}只
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="wds-frame-l">
              <div class="wds-bj"></div>
              <el-form-item class="wds-frame-form-item" label="一级螨害叶数">
                {{dataForm2.bcYjmhys}}片
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="wds-frame-l">
              <div class="wds-bj"></div>
              <el-form-item class="wds-frame-form-item" label="二级螨害叶数" prop="bcEjmhys">
                {{dataForm2.bcEjmhys}}片
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row class="wds-el-row" type="flex">
          <el-col :span="6">
            <div class="wds-frame-l">
              <div class="wds-bj"></div>
              <el-form-item class="wds-frame-form-item" label="统计螨害株率" prop="bcTjmhzl">
                {{dataForm2.bcTjmhzl}}%
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="wds-frame-l">
              <div class="wds-bj"></div>
              <el-form-item class="wds-frame-form-item" label="螨害级别" prop="bcMhjb">
                {{dataForm2.bcMhjb}}级
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="wds-frame-l">
              <div class="wds-bj"></div>
              <el-form-item class="wds-frame-form-item" label="平均螨害级数" prop="bcPjmhjs">
                {{dataForm2.bcPjmhjs}}
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="wds-frame-l">
              <div class="wds-bj"></div>
              <el-form-item class="wds-frame-form-item" label="有螨株率" prop="bcYmzl">
                {{dataForm2.bcYmzl}}%
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row class="wds-el-row" type="flex">
          <el-col :span="6">
            <div class="wds-frame-l">
              <div class="wds-bj"></div>
              <el-form-item class="wds-frame-form-item" label="卵数" prop="bcLs">
                {{dataForm2.bcLs}}粒
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="wds-frame-l">
              <div class="wds-bj"></div>
              <el-form-item class="wds-frame-form-item" label="幼虫数" prop="bcYcs">
                {{dataForm2.bcYcs}}只
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="wds-frame-l">
              <div class="wds-bj"></div>
              <el-form-item class="wds-frame-form-item" label="龄期" prop="bcLq">
                {{dataForm2.bcLq}}龄
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="wds-frame-l">
              <div class="wds-bj"></div>
              <el-form-item class="wds-frame-form-item" label="百株卵数" prop="bcBzls">
                {{dataForm2.bcBzls}}只
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row class="wds-el-row" type="flex">
          <el-col :span="6">
            <div class="wds-frame-l">
              <div class="wds-bj"></div>
              <el-form-item class="wds-frame-form-item" label="百株铃虫量" prop="bcBzlcl">
                {{dataForm2.bcBzlcl}}只
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="wds-frame-l">
              <div class="wds-bj"></div>
              <el-form-item class="wds-frame-form-item" label="总虫量" prop="bcZcl">
                {{dataForm2.bcZcl}}只
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="wds-frame-l">
              <div class="wds-bj"></div>
              <el-form-item class="wds-frame-form-item" label="有虫株率" prop="bcYczl">
                {{dataForm2.bcYczl}}%
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="wds-frame-l">
              <div class="wds-bj"></div>
              <el-form-item class="wds-frame-form-item" label="有蚜株率" prop="bcYyzl">
                {{dataForm2.bcYyzl}}%
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row class="wds-el-row" type="flex">
          <el-col :span="24">
            <div class="wds-frame-l">
              <div class="wds-bj"></div>
              <el-form-item class="wds-frame-form-item" label="百株蚜量" prop="bcBzyl">
                {{dataForm2.bcBzyl}}只
              </el-form-item>
            </div>
          </el-col>
        </el-row>
      </el-row>
    </el-form>

    <el-divider content-position="left">
      <b style="font-size: 20px">棉花周围土壤信息</b>
    </el-divider>
    <el-form :model="dataForm3" ref="dataForm3" class="wds-form-top" label-width="150px">
      <el-row class="wds-frame">
        <el-row class="wds-el-row" type="flex">
          <el-col :span="6">
            <div class="wds-frame-l">
              <div class="wds-bj"></div>
              <el-form-item class="wds-frame-form-item" label="有机质含量">
                {{dataForm3.trYjzhl}}kg
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="wds-frame-l">
              <div class="wds-bj"></div>
              <el-form-item class="wds-frame-form-item" label="全氮含量" prop="trQdhl">
                {{dataForm3.trQdhl}}g/kg
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="wds-frame-l">
              <div class="wds-bj"></div>
              <el-form-item class="wds-frame-form-item" label="碱解氮含量">
                {{dataForm3.trJjdhl}}g/kg
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="wds-frame-l">
              <div class="wds-bj"></div>
              <el-form-item class="wds-frame-form-item" label="有效磷含量" prop="trYxlhl">
                {{dataForm3.trYxlhl}}mg/kg
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row class="wds-el-row" type="flex">
          <el-col :span="6">
            <div class="wds-frame-l">
              <div class="wds-bj"></div>
              <el-form-item class="wds-frame-form-item" label="速效磷含量">
                {{dataForm3.trSxlhl}}mg/kg
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="wds-frame-l">
              <div class="wds-bj"></div>
              <el-form-item class="wds-frame-form-item" label="pH值" prop="trPh">
                {{dataForm3.trPh}}
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="wds-frame-l">
              <div class="wds-bj"></div>
              <el-form-item class="wds-frame-form-item" label="鲜重">
                {{dataForm3.trXz}}kg
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="wds-frame-l">
              <div class="wds-bj"></div>
              <el-form-item class="wds-frame-form-item" label="干重" prop="trGz">
                {{dataForm3.trGz}}kg
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row class="wds-el-row" type="flex">
          <el-col :span="24">
            <div class="wds-frame-l">
              <div class="wds-bj"></div>
              <el-form-item class="wds-frame-form-item" label="土壤含水量" prop="trTrhsl">
                {{dataForm3.trTrhsl}}%
              </el-form-item>
            </div>
          </el-col>
          </el-row>
      </el-row>
    </el-form>


  </div>
</template>

<script>
export default {
  data () {
    return {
      // 生长和质量基本信息
      dataForm: {
        mhId: 0,
        mhBh: '',
        recordDate: '',
        mhNumber: '',
        mhHeight: '',
        mhJc: '',
        mhYps: '',
        mhDygzjgd: '',
        mhGzs: '',
        mhLs: '',
        mhHs: '',
        mhZls: '',
        mhDzjls: '',
        mhTxs: '',
        mhGzsj: '',
        mhGzts: '',
        mhLc: '',
        mhLk: '',
        mhLx: '',
        mhDlz: '',
        // 质量
        mhYf: '',
        mhZmcl: '',
        mhMklz: '',
        mhZqd: '',
        mhBqd: '',
        mhSzl: '',
        mhFsl: '',
        mhHd: '',
        mhYz: '',
        mhZz: '',
        addUser: ''
      },
      // 病虫
      dataForm2: {
        bcId: 0,
        mhBh: '',
        mhNumber: '',
        bcMhzs: '',
        bcBzml: '',
        bcYjmhys: '',
        bcEjmhys: '',
        bcTjmhzl: '',
        bcMhjb: '',
        bcPjmhjs: '',
        bcYmzl: '',
        bcLs: '',
        bcYcs: '',
        bcLq: '',
        bcBzls: '',
        bcBzlcl: '',
        bcZcl: '',
        bcYczl: '',
        bcYyzl: '',
        bcBzyl: ''
      },
      // 土壤
      dataForm3: {
        trId: 0,
        mhBh: '',
        trYjzhl: '',
        trQdhl: '',
        trJjdhl: '',
        trYxlhl: '',
        trSxlhl: '',
        trPh: '',
        trXz: '',
        trGz: '',
        trTrhsl: ''
      }
    }
  },
  methods: {
    goBack () {
      this.$emit('goBack')
    },
    init (row) {
      console.log(row, 'xx')
      // console.log(this.$store.state.user.name)
      // 基本质量和生长信息
      this.dataForm = row
      // 病虫信息
      this.dataForm2.mhBh = row.mhBh || ''  // 通过编号找病虫信息表的信息
      this.$nextTick(() => {
        this.$refs['dataForm2'].resetFields()
        if (this.dataForm2.mhBh) {
          this.$http({
            url: this.$http.adornUrl(`/mh/bc/infobh/${row.mhBh}`),
            method: 'get',
            params: this.$http.adornParams()
          }).then(({data}) => {
            if (data && data.code === 0) {
              console.log('bcdata', data)
              this.dataForm2.mhBh = data.bc.mhBh
              this.dataForm2.mhNumber = data.bc.mhNumber
              this.dataForm2.bcMhzs = data.bc.bcMhzs
              this.dataForm2.bcBzml = data.bc.bcBzml
              this.dataForm2.bcYjmhys = data.bc.bcYjmhys
              this.dataForm2.bcEjmhys = data.bc.bcEjmhys
              this.dataForm2.bcTjmhzl = data.bc.bcTjmhzl
              this.dataForm2.bcMhjb = data.bc.bcMhjb
              this.dataForm2.bcPjmhjs = data.bc.bcPjmhjs
              this.dataForm2.bcYmzl = data.bc.bcYmzl
              this.dataForm2.bcLs = data.bc.bcLs
              this.dataForm2.bcYcs = data.bc.bcYcs
              this.dataForm2.bcLq = data.bc.bcLq
              this.dataForm2.bcBzls = data.bc.bcBzls
              this.dataForm2.bcBzlcl = data.bc.bcBzlcl
              this.dataForm2.bcZcl = data.bc.bcZcl
              this.dataForm2.bcYczl = data.bc.bcYczl
              this.dataForm2.bcYyzl = data.bc.bcYyzl
              this.dataForm2.bcBzyl = data.bc.bcBzyl
            }
          })
        }
      })
      // 土壤信息
      this.dataForm3.mhBh = row.mhBh || ''  // 通过编号找土壤信息表的信息
      this.$nextTick(() => {
        this.$refs['dataForm3'].resetFields()
        if (this.dataForm3.mhBh) {
          this.$http({
            url: this.$http.adornUrl(`/mh/tr/infobh/${row.mhBh}`),
            method: 'get',
            params: this.$http.adornParams()
          }).then(({data}) => {
            if (data && data.code === 0) {
              console.log('trdata', data)
              this.dataForm3.mhBh = data.tr.mhBh
              this.dataForm3.trYjzhl = data.tr.trYjzhl
              this.dataForm3.trQdhl = data.tr.trQdhl
              this.dataForm3.trJjdhl = data.tr.trJjdhl
              this.dataForm3.trYxlhl = data.tr.trYxlhl
              this.dataForm3.trSxlhl = data.tr.trSxlhl
              this.dataForm3.trPh = data.tr.trPh
              this.dataForm3.trXz = data.tr.trXz
              this.dataForm3.trGz = data.tr.trGz
              this.dataForm3.trTrhsl = data.tr.trTrhsl
            }
          })
        }
      })
    }
  }
}
</script>

<style>
.wds-form-top {
  margin-top: 8px;
}
.wds-frame {
  margin-left: 15px;
  margin-right: 15px;
  border-top: 1px solid rgba(184, 194, 215, 0.4);
  border-right: 1px solid rgba(184, 194, 215, 0.4);
}
.wds-frame-l {
  position: relative;
  width: 100%;
  height: 100%;
  border-left: 1px solid rgba(184, 194, 215, 0.4);
  border-bottom: 1px solid rgba(184, 194, 215, 0.4);
}
.wds-frame-form-item .el-form-item__label {
  padding-top: 6px;
  padding-left: 4px;
  line-height: 20px !important;
  width: 130px !important;
  color: #054999;
}
.wds-bj{
  width: 140px;
  border-right: 1px solid rgba(184, 194, 215, 0.4);
  height: 100%;
  position: absolute;
  margin-top: 0px;
}
.wds-frame-form-item{
  max-height: 25px;
  padding-top: 6px;
  padding-left: 4px;
  line-height: 20px !important;
  color: #054999;
}
.wds-el-row2{
  height: 120px;

}

</style>
